<template>
  <div>
    <el-menu router mode="horizontal" :default-active="getActiveIndex()"
             background-color="#151F29" @select="handelSelect" text-color="#ccc"
             active-text-color="#00A1D8">
      <el-menu-item v-for="item in headMenu" :index="fullPath(item)"
                    :key="item.path">
        {{ item.meta.title }}
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
import path from 'path'
import { mapGetters, mapActions } from 'vuex'
import history from '../../store/modules/history'
export default {
  //import引入的组件需要注入到对象中才能使用",
  components: {},
  data () {
    //这里存放数据",
    return {}
  },
  //监听属性 类似于data概念",
  computed: {
    ...mapGetters({
      headMenu: 'menu/head',
      history: 'history/historyList'
    })
  },
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {
    ...mapActions({
      setAside: 'menu/setAside'
    }),
    fullPath (item) {
      return path.resolve(item.path)
    },
    handelSelect (index, path) {
      this.headMenu.forEach((item, index1) => {
        if (this.fullPath(item) === index) {
          //更新二级目录
          this.setAside(item)
          //判断历史列表中是否存在当前一级菜单的历史
          let i = this.history.findIndex(item1 => {
            return item1.parent === item.path
          })
          if (i !== -1) {
            //防止重复插入路由，如果当前路由就是历史内的路由，则不刷新路由
            if (this.history[i].path != location.pathname) {
              let hawkHistory = this.history
              setTimeout(() => {
                this.$router.push(hawkHistory[i].path)
              }, 300)
            }
          } else {
            //默认展开第一个路由
            let route = this.fullPath(item)
            if (item.children && item.children.length > 0) {
              route +=
                item.children[0].path !== '' ? '/' + item.children[0].path : ''
              if (
                item.children[0].children &&
                item.children[0].children.length > 0
              ) {
                route +=
                  item.children[0].children[0].path !== ''
                    ? '/' + item.children[0].children[0].path
                    : ''
              }
            }
            setTimeout(() => {
              this.$router.push(route)
            }, 300)
          }
        }
      })
    },
    getActiveIndex () {
      return '/' + location.pathname.split('/hawk/')[1].split('/')[0]
    }
  },
  //生命周期 - 创建之前",数据模型未加载,方法未加载,html模板未加载
  beforeCreate () { },

  //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
  created () {
    this.handelSelect('/' + location.pathname.split('/')[1])
  },

  //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
  mounted () {
    this.$router.push("/home")
  }
}
</script>

<style scoped>
.el-menu.el-menu--horizontal {
  border-bottom: none;
  white-space: nowrap;
}
.el-menu--horizontal > .el-menu-item {
  border-bottom: none;
}
.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: none;
  background-color: #000000 !important;
}
</style>
